import { useRequest } from '@umijs/hooks';
import { Form, Input, InputNumber, message, Modal, TreeSelect, Select } from 'antd';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { fetchRequest } from '../../../utils/Request';
import { url } from '../../../utils/url';
import './style.css';



//参数的类型
interface DeptInfo {
    parentID: string | undefined | null,
    deptName: string,
    orderNum: number,
    managerList: string[]
}

interface ManagerInfo {
    managerID: number
    managerName: string
}



export default function AddDepartment(props: any) {

    const [data, setData] = useState(props)

    const [manage, setManage] = useState<ManagerInfo[]>([])

    const [form] = Form.useForm();

    // const [deptInfo, setdeptInfo] = useState([])


    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };

    //获取redux中的数据
    const deptData = useSelector((state: StoreState) => {

        disableSelect(state.deptManage.deptData)
        return state.deptManage.deptData
    })

    const getManager = useRequest(getManageList, {
        loadingDelay: 200
    })


    //得到管理人员的list
    async function getManageList() {
        try {
            const json = await fetchRequest(url.GET_MANAGER_LIST_URL, "")
            console.log(json)
            if (json.success) {
                // console.log(json)
                setManage(json.data)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }

    //递归定义不能选择的item
    function disableSelect(arr: any[], ) {
        arr.map(item => {


            delete item.disabled

            if (typeof item.children === "undefined" || item.children === null || item.children.length === 0) {
                return;
            } else {
                disableSelect(item.children)
            }
        })
    }



    async function createDept(params: DeptInfo) {
        try {
            // console.log(params)
            //TODO 后需要进行操作
            const json = await fetchRequest(url.MODIFY_DEPART_URL, params);
            if (json.success) {
                props.onAddSuccess();
                setData({ ...data, visible: false })
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }

    const create = useRequest(createDept, {
        manual: true
    })

    //点击提交的时候
    function handleFinish(values: any) {
        // console.log(values)
        //TODO 后续要进行提交的网络请求
        create.run(values)
        // console.log(values)
    }

    //点击确定的时候
    function handleOk() {
        form.submit()
    }

    //点击取消
    function onCancel() {
        setData({ ...data, visible: false })
    }

    // console.log(deptData)

    return (
        <Modal afterClose={props.onAddCancel} onCancel={onCancel} centered destroyOnClose visible={data.visible} title="新增组织" onOk={handleOk} okText='提交' confirmLoading={create.loading} >
            <Form  {...layout} form={form} onFinish={handleFinish} name="basic" initialValues={{ parentID: props.deptID, orderNum: 1 }}>
                <Form.Item name="parentID" label="上级组织" rules={[{ required: true, message: '必须选择上级组织!' }]} shouldUpdate>
                    <TreeSelect treeDefaultExpandAll className="form-item" treeData={deptData} />
                </Form.Item>


                <Form.Item name="deptName" label="组织名称" rules={[{ required: true, message: '必须输入组织名称!' }]}>
                    <Input className="form-item" />
                </Form.Item>
                <Form.Item name="orderNum" label="显示排序" rules={[{ required: true, message: '必须输入显示排序!' }]}>
                    <InputNumber className="form-item" min={1} />
                </Form.Item>
                <Form.Item name="managerList" label="组织负责人" rules={[{ required: true, message: '必须选择组织负责人!' }]}>
                    <Select mode="multiple" maxTagCount={2} filterOption={(inputValue: any, option: any) => {
                        return option.children.indexOf(inputValue) !== -1
                        // if (option.children.indexOf(inputValue) !== -1) {
                        //     return true
                        // }
                        // return false;
                    }}>{
                            manage.map((item: ManagerInfo, index: number) => <Select.Option key={index} value={item.managerID}>{item.managerName}</Select.Option>)
                        }
                    </Select>
                </Form.Item>

            </Form>
        </Modal>
    )
}
